// 404组件

import React, { useEffect, useState } from 'react'
import { Link, useHistory } from 'react-router-dom'
export default function NotFound() {
  const history = useHistory()
  const [time, setTime] = useState(3)

  // 方法一
  //   const timeRef = useRef(null)
  //   useEffect(() => {
  //     let timer = setInterval(() => {
  //       setTime((time) => {
  //         timeRef.current = time - 1
  //         return time - 1
  //       })
  //       if (timeRef.current === 0) {
  //         clearInterval(timer)
  //         history.push('/home')
  //       }
  //     }, 1000)
  //   }, [history])

  // 方法二
  //   useEffect(() => {
  //     let timer = setTimeout(() => {
  //       setTime(time - 1)
  //     }, 1000)
  //     if (time === 0) {
  //       clearTimeout(timer)
  //       history.push('/home')
  //     }
  //   }, [time, history])

  // 方法三
  useEffect(() => {
    let timer = setTimeout(() => {
      setTime(time - 1)
    }, 1000)
    return () => {
      clearTimeout(timer)
    }
  })
  useEffect(() => {
    if (time === 0) {
      history.push('/home')
    }
  }, [time, history])

  return (
    <div>
      <h1>访问内容不存在</h1>
      <p>
        {time}秒后返回首页 <Link to="/home">立即跳转</Link>
      </p>
    </div>
  )
}
